<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册上传</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../css/oksub.css">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form" lay-filter="form">
        <div class="layui-form-item">
            <label class="layui-form-label">图片标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请输入图片标题" autocomplete="off" class="layui-input"
                       lay-verify="required">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">图片上传</button>
                <input type="hidden" id="url" name="url">
                <input type="hidden" id="smUrl" name="smUrl">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add">上传</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
    layui.use(["element", "form", "laydate", "okLayer", "okUtils","jquery",'upload','layer'], function () {
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let $=layui.jquery;
        let upload=layui.upload;
        let layer=layui.layer;
        okLoading.close();
        laydate.render({elem: "#birthday", type: "datetime"});

        form.verify({
            birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
        });

        var loadIndex;
        upload.render({
            elem: '#test2'
            ,url: '/api/file/uploadPhoto' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                loadIndex=layer.load(0, {shade: 0.3});
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //上传完毕
                form.val('form',{
                    "url":res.url,
                    "smUrl":res.smUrl
                })
                layer.close(loadIndex);
                layer.msg(res.msg, {icon: 7, time: 2000});
            }
        });

        form.on("submit(add)", function (data) {
            console.log(data.field);
            okUtils.ajax("/photo/add", "post", data.field, true).done(function (response) {
                console.log(response);
                okLayer.greenTickMsg("添加成功", function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }).fail(function (error) {
                console.log(error)
            });
            return false;
        });


    });
</script>
</body>
</html>
